<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>渣男指数测试 - 毅嘉互联科技</title>
    <style>
        /* 全局重置 & 字体 */
        *{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
        html,body{height:100%;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#333}
        /* 版权条 */
        .copyright{position:fixed;top:0;left:0;right:0;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.05);z-index:1000;text-align:center;font-size:12px;line-height:1.4;padding:6px;color:#555}
        /* 主容器 */
        .container{max-width:480px;margin:0 auto;padding:80px 16px 24px;display:flex;align-items:center;justify-content:center;min-height:100vh}
        .card{background:#fff;border-radius:20px;box-shadow:0 12px 32px rgba(0,0,0,.15);width:100%;padding:32px 24px}
        h1{font-size:28px;font-weight:700;text-align:center;margin-bottom:24px;color:#764ba2}
        h2{font-size:20px;font-weight:600;margin-bottom:20px;color:#333}
        /* 表单样式 */
        label{display:block;font-size:15px;font-weight:600;margin-bottom:6px;color:#555}
        input,select{width:100%;padding:12px 14px;border:1.5px solid #d0d7de;border-radius:12px;font-size:16px;background:#f6f8fa;margin-bottom:16px;transition:border .2s}
        input:focus,select:focus{border-color:#764ba2;outline:none}
        .btn{width:100%;padding:14px 0;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:.3s}
        .btn-primary{background:#764ba2;color:#fff}
        .btn-primary:disabled{background:#c7b8e6;cursor:not-allowed}
        .btn-primary:not(:disabled):hover{background:#5f3b8a}
        .btn-secondary{background:#e0e0e0;color:#333}
        .btn-secondary:hover{background:#ccc}
        /* 免责声明 */
        .modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:2000}
        .modal-content{background:#fff;border-radius:16px;padding:32px 24px;max-width:340px;margin:0 16px;text-align:center}
        .modal-content p{font-size:15px;line-height:1.6;color:#444;margin-bottom:24px}
        /* 进度条 */
        .progress-bar{height:8px;background:#e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:20px}
        .progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);transition:width .3s}
        .progress-text{font-size:14px;color:#666;text-align:right;margin-bottom:4px}
        /* 选项按钮 */
        .option{display:block;width:100%;padding:14px 16px;margin-bottom:12px;border:2px solid #d0d7de;border-radius:12px;font-size:16px;background:#fff;cursor:pointer;transition:.2s}
        .option:hover{border-color:#764ba2;background:#f3f0fa}
        .option.selected{border-color:#764ba2;background:#ede7f6;color:#5f3b8a;font-weight:600}
        /* 结果区域 */
        .result-score{font-size:48px;font-weight:700;text-align:center;margin:12px 0}
        .result-level{font-size:20px;font-weight:600;text-align:center;margin-bottom:16px}
        .safe{color:#10b981}
        .warning{color:#f59e0b}
        .danger{color:#ff6b6b}
        .critical{color:#e63946}
        .result-desc{background:#f6f8fa;border-radius:12px;padding:16px;font-size:15px;line-height:1.6;color:#444;margin-bottom:24px}
        /* 响应式微调 */
        @media(max-width:480px){
            .card{padding:24px 20px}
            h1{font-size:24px}
        }
    </style>
</head>
<body>
    <!-- 版权信息 -->
    <div class="copyright">
        ©️毅嘉互联科技 - 版权所有侵权必究<br>
        制作：谢俊杰<br>
        地址：四川省成都市新津区新科大道
    </div>

    <!-- 免责声明 -->
    <div id="disclaimer" class="modal">
        <div class="modal-content">
            <h2>免责声明</h2>
            <p>本测试仅供娱乐，不能替代专业测评，测试结果应结合实际情况理性看待！</p>
            <button class="btn btn-primary" onclick="startApp()">同意并继续</button>
        </div>
    </div>

    <!-- 主容器 -->
    <div class="container">
        <!-- 1. 用户信息 -->
        <div id="userForm" class="card">
            <h1>渣男指数测试</h1>
            <label>昵称 <span style="color:#e63946">*</span></label>
            <input type="text" id="nickname" placeholder="请输入您的昵称" maxlength="20">
            <label>性别 <span style="color:#e63946">*</span></label>
            <select id="gender">
                <option value="">请选择</option>
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
            <label>年龄 <span style="color:#e63946">*</span></label>
            <input type="number" id="age" placeholder="18-35岁" min="18" max="35">
            <button class="btn btn-primary" onclick="saveUser()">开始测试</button>
        </div>

        <!-- 2. 测试题 -->
        <div id="quiz" class="card" style="display:none">
            <div class="progress-text"><span id="current">1</span>/20</div>
            <div class="progress-bar"><div id="progress" class="progress-fill" style="width:5%"></div></div>
            <h2 id="qText"></h2>
            <div id="options"></div>
            <button id="nextBtn" class="btn btn-primary" disabled>下一题</button>
        </div>

        <!-- 3. 结果页 -->
        <div id="result" class="card" style="display:none">
            <h1>测试结果</h1>
            <div class="result-desc">
                <b>昵称：</b><span id="rNickname"></span><br>
                <b>性别：</b><span id="rGender"></span><br>
                <b>年龄：</b><span id="rAge"></span>
            </div>
            <div class="result-score" id="rScore"></div>
            <div class="result-level" id="rLevel"></div>
            <div class="result-desc" id="rDesc"></div>
            <button class="btn btn-primary" onclick="restart()">重新测试</button>
        </div>
    </div>

    <script>
        /* 题目 */
        const questions = [
            "你是否经常对伴侣撒谎？",
            "你是否同时与多人保持暧昧关系？",
            "你是否经常忘记重要的纪念日？",
            "你是否经常对伴侣使用冷暴力？",
            "你是否经常拿伴侣与他人比较？",
            "你是否经常忽视伴侣的感受？",
            "你是否经常承诺却从不兑现？",
            "你是否经常查看伴侣的手机？",
            "你是否经常对伴侣发脾气？",
            "你是否经常让伴侣感到不安？",
            "你是否经常与其他异性过于亲密？",
            "你是否经常让伴侣等待你的消息？",
            "你是否经常对伴侣的关心感到厌烦？",
            "你是否经常让伴侣感到自卑？",
            "你是否经常让伴侣感到孤独？",
            "你是否经常让伴侣感到不被重视？",
            "你是否经常让伴侣感到不被理解？",
            "你是否经常让伴侣感到不被尊重？",
            "你是否经常让伴侣感到不被爱？",
            "你是否经常让伴侣感到不被需要？"
        ];

        let step = 0, answers = [], user = {};

        /* 免责声明 → 表单 */
        function startApp(){
            document.getElementById('disclaimer').style.display='none';
        }

        /* 保存用户信息 */
        function saveUser(){
            const nick = document.getElementById('nickname').value.trim();
            const g = document.getElementById('gender').value;
            const a = parseInt(document.getElementById('age').value);
            if(!nick){alert('请输入昵称');return}
            if(!g){alert('请选择性别');return}
            if(!a || a<18 || a>35){alert('年龄必须在18-35之间');return}
            user={nickname:nick,gender:g,age:a};
            document.getElementById('userForm').style.display='none';
            document.getElementById('quiz').style.display='block';
            loadQuestion();
        }

        /* 加载题目 */
        function loadQuestion(){
            if(step>=questions.length){showResult();return}
            document.getElementById('current').textContent=step+1;
            document.getElementById('progress').style.width=(step+1)/20*100+'%';
            document.getElementById('qText').textContent=questions[step];
            const opts=['从不','很少','有时','经常','总是'];
            document.getElementById('options').innerHTML='';
            opts.forEach((txt,i)=>{
                const btn=document.createElement('button');
                btn.className='option';btn.textContent=txt;
                btn.onclick=function(){
                    document.querySelectorAll('.option').forEach(b=>b.classList.remove('selected'));
                    btn.classList.add('selected');
                    document.getElementById('nextBtn').disabled=false;
                };
                document.getElementById('options').appendChild(btn);
            });
            document.getElementById('nextBtn').disabled=true;
        }

        /* 下一题 */
        function next(){
            const sel=document.querySelector('.option.selected');
            if(!sel)return;
            answers.push([...document.querySelectorAll('.option')].indexOf(sel));
            step++;
            loadQuestion();
        }

        /* 显示结果 */
        function showResult(){
            document.getElementById('quiz').style.display='none';
            document.getElementById('result').style.display='block';
            const score = answers.reduce((a,b)=>a+b,0);
            document.getElementById('rNickname').textContent=user.nickname;
            document.getElementById('rGender').textContent=user.gender;
            document.getElementById('rAge').textContent=user.age;
            document.getElementById('rScore').textContent=score+'分';

            let level,cls,desc,adv;
            if(score<=15){
                level='绿色安全区';cls='safe';
                desc='恭喜你！你是一个值得信赖的伴侣，在感情中表现得非常成熟和负责任。';
                adv='继续保持这种良好的品质，你的感情生活会更加幸福美满。';
            }else if(score<=30){
                level='黄色警示区';cls='warning';
                desc='你在某些方面还有改进的空间，需要注意自己的行为对伴侣的影响。';
                adv='建议多与伴侣沟通，了解对方的需求和感受，努力改善自己的行为。';
            }else if(score<=45){
                level='橙色危险区';cls='danger';
                desc='你的行为已经对伴侣造成了一定的伤害，需要认真反思和改变。';
                adv='建议寻求专业咨询或参加情感教育课程，学习如何建立健康的亲密关系。';
            }else{
                level='红色高危区';cls='critical';
                desc='你的行为已经严重伤害了伴侣，需要立即停止并寻求专业帮助。';
                adv='强烈建议寻求心理咨询师的帮助，学习如何尊重他人和建立健康的亲密关系。';
            }
            document.getElementById('rLevel').textContent=level;
            document.getElementById('rLevel').className='result-level '+cls;
            document.getElementById('rDesc').innerHTML='<b>'+level+'</b><br>'+desc+'<br><br><b>建议：</b>'+adv;
        }

        /* 重新测试 */
        function restart(){
            step=0;answers=[];user={};
            document.getElementById('nickname').value='';
            document.getElementById('gender').value='';
            document.getElementById('age').value='';
            document.getElementById('result').style.display='none';
            document.getElementById('userForm').style.display='block';
        }

        /* 绑定下一题按钮 */
        document.getElementById('nextBtn').addEventListener('click',next);
    </script>
</body>
</html>